@import "./InvisibleTextStyles.css";

:host(:not([hidden])) {
	display: inline-block;
	width: 100%;
	max-width: 100%;
	background: var(--sapShellColor);
	box-sizing: border-box;
}

:host {
	--_ui5_input_placeholder_color: var(--sapShell_InteractiveTextColor);
	--_ui5_input_border_radius: var(--_ui5_shellbar_input_border_radius);
	--_ui5_input_focus_border_radius: var(--_ui5_shellbar_input_focus_border_radius);
	--_ui5_input_background_color: var(--_ui5_shellbar_input_background_color);
	--_ui5_input_focus_outline_color: var(--_ui5_shellbar_input_focus_outline_color);
	--_ui5_input_margin_top_bottom: 0;
	box-shadow: inset 0 -0.0625rem 0 0 var(--sapPageHeader_BorderColor);
	/* Overwrite the default button styles to fulfill no "compact" mode of ui5-shellbar */
	--_ui5_button_base_min_width: 2.25rem;
	--_ui5_button_base_padding: 0.5625rem;
	--_ui5_button_base_height: var(--sapElement_Height);
	--_ui5-button-badge-diameter: 0.75rem;
}

.ui5-shellbar-root {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--_ui5_shellbar_root_height);
	font-family: var(--sapFontFamily);
	font-size: var(--sapFontSize);
	font-weight: normal;
	box-sizing: border-box;
}

.ui5-shellbar-menu-button,
.ui5-shellbar-button,
.ui5-shellbar-image-button,
::slotted([ui5-toggle-button]:not([slot^="content"])),
::slotted([ui5-button]:not([slot^="content"])) {
	height: 2.25rem;
	padding: 0;
	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
	border: 0.0625rem solid var(--sapButton_Lite_BorderColor);
	background: var(--sapButton_Lite_Background);
	outline-color: var(--_ui5_shellbar_logo_outline_color);
	color: var(--sapShell_TextColor);
	box-sizing: border-box;
	cursor: pointer;
	border-radius: var(--_ui5_shellbar_button_border_radius);
	position: relative;
	font-weight: bold;
	white-space: initial;
	overflow: initial;
	text-overflow: initial;
	line-height: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
}

::slotted([ui5-toggle-button][slot="assistant"]) {
	margin-inline-start: 0;
}

.ui5-shellbar-assistant-button {
	margin-inline-start: var(--_ui5-shellbar-overflow-button-margin);
}

::slotted([ui5-button][slot="startButton"]) {
	margin-inline-start: 0;
}

::slotted([ui5-toggle-button]:hover),
::slotted([ui5-button]:hover),
.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
.ui5-shellbar-button:hover,
.ui5-shellbar-image-button:hover,
::slotted([ui5-button][slot="midContent"]:hover) {
	background: var(--sapShell_Hover_Background);
	border-color: var(--sapButton_Lite_Hover_BorderColor);
	color: var(--sapShell_TextColor);
}

::slotted([ui5-toggle-button][slot="assistant"][pressed]),
::slotted([ui5-toggle-button][slot="assistant"][pressed]:hover:not([active])) {
	color: var(--sapShell_Assistant_ForegroundColor);
}

::slotted([ui5-toggle-button][active]),
::slotted([ui5-button][active]),
.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,
.ui5-shellbar-button[active],
.ui5-shellbar-image-button:active{
	background: var(--sapShell_Active_Background);
	border-color: var(--sapButton_Lite_Active_BorderColor);
	color: var(--_ui5_shellbar_button_active_color);
}

:host([desktop]) .ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus,
.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus-visible {
	outline: var(--_ui5_shellbar_logo_outline);
	outline-offset: var(--_ui5_shellbar_outline_offset);
}

slot[name="profile"] {
	min-width: 0;
}

::slotted([ui5-avatar][slot="profile"]) {
	display: block;
	width: 2rem;
	height: 2rem;
	min-width: 0;
	min-height: 2rem;
	font-size: var(--_ui5_avatar_fontsize_XS);
	font-weight: normal;
}

.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
	border: none;
}

.ui5-shellbar-menu-button-arrow,
.ui5-shellbar-menu-button-title,
.ui5-shellbar-title {
	display: inline-block;
	font-family: var(--sapFontSemiboldDuplexFamily);
	margin: 0;
	font-size: var(--_ui5_shellbar_menu_button_title_font_size);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--sapShell_SubBrand_TextColor);
}

:host(:not([primary-title])) .ui5-shellbar-menu-button {
	min-width: 2.25rem;
	justify-content: center;
}

.ui5-shellbar-secondary-title {
	display: inline-block;
	font-size: var(--sapFontSmallSize);
	color: var(--sapShell_TextColor);
	font-weight: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	margin: 0;
	text-align: start;
}

.ui5-shellbar-headings {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	overflow: hidden;
	margin-inline-start: 0.25rem;
}

.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
	margin-inline-start: 0.375rem;
}

.ui5-shellbar-overflow-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	overflow: hidden;
}

.ui5-shellbar-overflow-container-middle {
	align-self: flex-start;
	height: var(--_ui5_shellbar_overflow_container_middle_height);
	width: 0;
	flex-shrink: 0;
}

.ui5-shellbar-mid-content {
	height: var(--_ui5_shellbar_overflow_container_middle_height);
}


:host([breakpoint-size="S"]) .ui5-shellbar-menu-button {
	margin-inline-start: 0;
}

:host([breakpoint-size="S"]) {
	padding: 0 1rem;
}

:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
	padding: 0 1rem;
}

:host([breakpoint-size="M"]) {
	padding: 0 2rem;
}

:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
	padding: 0 2rem;
}

:host([breakpoint-size="L"]) {
	padding: 0 2rem;
}

:host([breakpoint-size="XL"]) {
	padding: 0 3rem;
}

:host([breakpoint-size="XXL"]) {
	padding: 0 3rem;
}

.ui5-shellbar-logo {
	overflow: hidden;
	cursor: pointer;
}

.ui5-shellbar-logo-area {
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: .25rem .5rem .25rem .25rem;
	box-sizing: border-box;
	cursor: pointer;
	background: var(--sapButton_Lite_Background);
	border: 1px solid var(--sapButton_Lite_BorderColor);
	color: var(--sapShell_TextColor);
	/* fix cutting of the focus outline */
	margin-inline-start: 0.125rem;
}

.ui5-shellbar-logo:focus,
.ui5-shellbar-logo-area:focus {
	outline: var(--_ui5_shellbar_logo_outline);
	outline-offset: calc(-1 * var(--sapContent_FocusWidth));
	border-radius: var(--_ui5_shellbar_logo_border_radius);
}

.ui5-shellbar-overflow-container > .ui5-shellbar-logo:hover,
.ui5-shellbar-logo-area:hover {
	box-shadow: var(--_ui5_shellbar_button_box_shadow);
	border-radius: var(--_ui5_shellbar_logo_border_radius);
}

.ui5-shellbar-logo-area:active:focus {
	background: var(--sapShell_Active_Background);
	border: 1px solid var(--sapButton_Lite_Active_BorderColor);
	color: var(--sapShell_Active_TextColor);
}

.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover {
	box-shadow: var(--_ui5_shellbar_button_box_shadow);
}

.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active {
	box-shadow: var(--_ui5_shellbar_button_box_shadow_active);
}

.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-arrow,
.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active .ui5-shellbar-menu-button-title {
	color: var(--sapShell_Active_TextColor);
}

.ui5-shellbar-menu-button .ui5-shellbar-logo:hover {
	box-shadow: none;
}

.ui5-shellbar-button {
	width: 2.5rem;
	box-sizing: border-box;
}

.ui5-shellbar-button,
::slotted([ui5-button][slot="startButton"]) {
	--_ui5_button_focused_border: var(--_ui5_shellbar_button_focused_border);
}

.ui5-shellbar-cancel-button{
	color: var(--_ui5-shellbar_cancel-button-color);
}

.ui5-shellbar-cancel-button:hover{
	color: var(--_ui5-shellbar_cancel-button-color);
}

.ui5-shellbar-image-button {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: auto;
	height: 2.5rem;
	--_ui5_button_focused_border_radius: var(--_ui5_shellbar_image_button_border_radius);
	border-radius: var(--_ui5_shellbar_image_button_border_radius);
}

.ui5-shellbar-overflow-container-left {
	padding: 0;
	justify-content: flex-start;
	max-width: 75%;
	flex-shrink: 0;
}

.ui5-shellbar-overflow-container-left > :nth-child(n) {
	margin-inline-end: 0.5rem;
}

/* :host([breakpoint-size="XXL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-left {
	flex-basis: 50%;
	max-width: calc(50% - 18.25rem);
} */

.ui5-shellbar-menu-button {
	white-space: nowrap;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	cursor: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	cursor: pointer;
	background: var(--sapButton_Lite_Background);
	border: var(--_ui5_shellbar_button_border);
	color: var(--sapShell_TextColor);
}

:host(:not([with-logo])) .ui5-shellbar-menu-button {
	margin-inline-start: 0;
}

.ui5-shellbar-overflow-container-right {
	flex-grow: 1;
	justify-content: flex-end;
}

.ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
	display: flex;
	justify-content: flex-end;
	height: inherit;
	align-items: center;
}

.ui5-shellbar-overflow-container-right-inner {
	display: flex;
	flex-grow: 1;
}

.ui5-shellbar-content-items {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	/* max-content prevents the container from overflowing
	which is needed for the responsive logic */
	min-width: max-content;
}

.ui5-shellbar-spacer {
	flex-grow: 1;
	height: 1px;
	flex-basis: 1rem;
	flex-shrink: 1;
}

.ui5-shellbar-separator {
	flex-grow: 0;
	flex-shrink: 0;
	height: var(--_ui5-shellbar-separator-height);
	width: 1px;
	background-color: var(--_ui5-shellbar_separator-color);
}

.ui5-shellbar-separator-end {
	margin-inline-start: 0.5rem;
}

:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
	padding-inline-start: 0;
}

::slotted([hidden]) {
	visibility: hidden;
	order: -1;
	position: absolute;
}

.ui5-shellbar-content-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
 	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
}

.ui5-shellbar-overflow-container-right-child .ui5-shellbar-bell-button [slot="badge"] {
    inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
}

.ui5-shellbar-overflow-container-right-child .ui5-shellbar-custom-item [slot="badge"] {
    inset-inline-end: var(--_ui5_shellbar_notification_btn_count_offset);
}

.ui5-shellbar-menu-button {
	margin-inline-start: 0.5rem;
}

.ui5-shellbar-search-field {
	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
	min-width: var(--_ui5_shellbar_search_field_width);
	align-items: center;
	flex-grow: 1;
	margin-inline-start: 0.5rem;
}

.ui5-shellbar-overflow-container-right-child > :first-child {
	margin-inline-start: 0;
}

.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
	height: 2.25rem;
	width: 100%;
}

.ui5-shellbar-search-full-width-wrapper {
	position: absolute;
	bottom: 0.0625rem;
	left: 0;
	background: var(--sapShellColor);
	height: 100%;
	width: 100%;
	z-index: 1001;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button {
	width: auto;
}

.ui5-shellbar-search-full-width-wrapper ::slotted([ui5-shellbar-search]) {
	max-width: unset;
}

::slotted([ui5-input]) {
	background: var(--_ui5_shellbar_search_field_background);
	border: var(--_ui5_shellbar_search_field_border);
	box-shadow: var(--_ui5_shellbar_search_field_box_shadow);
	color: var(--_ui5_shellbar_search_field_color);
	height: 2.25rem;
	width: 100%;
	min-width: var(--_ui5_shellbar_search_field_width);
}

:host([breakpoint-size="M"]) ::slotted([ui5-input]),
:host([breakpoint-size="S"]) ::slotted([ui5-input]) {
	min-width: 1rem;
}

:host([breakpoint-size="M"][show-search-field]) .ui5-shellbar-overflow-container-right-child {
	flex-grow: 1;
}

::slotted([ui5-input]:hover) {
	background: var(--_ui5_shellbar_search_field_background_hover);
	box-shadow: var(--_ui5_shellbar_search_field_box_shadow_hover);
}

::slotted([ui5-input][focused]) {
	outline: var(--_ui5_shellbar_search_field_outline_focused);
}

::slotted([slot="logo"]) {
	max-height: 2rem;
	vertical-align: middle;
}

::slotted([slot="logo"]):active {
	pointer-events: none;
}

.ui5-shellbar-co-pilot-placeholder {
	width: 2.75rem;
	height: 2.75rem;
}

.ui5-shellbar-coPilot-pressed,
.ui5-shellbar-coPilot-pressed:hover {
	color: var(--sapShell_Assistant_ForegroundColor);
}

::slotted([ui5-button][slot="startButton"]) {
	margin-inline: 0 0.5rem;
	justify-content: center;
	align-items: center;
}

::slotted([ui5-button][data-profile-btn]) {
	width: auto;
}

/* if class contains ui5-shellbar-hidden-button */
::slotted(.ui5-shellbar-hidden-button),
.ui5-shellbar-hidden-button,
.ui5-shellbar-invisible-button {
	visibility: hidden;
	order: -1;
	opacity: 0;
	min-width: 0;
	width: 0;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	border: 0;
	margin-inline-start: 0;
}